<template>
  <view class="box">
    <view class="top">
      <view class="top1">
        <view class="top1-left">
          <image src="../../static/2.jpg" ></image>
        </view>
        <view class="top1-right">
          <view>蜡笔小生</view>
          <view>发布于: 2022-04-12 09:38:12</view>
        </view>
      </view>
      <view class="top2">
        而根据同程旅行发布的《2020端午小长假居民出行及出游趋势报告》，今年端午三天假期的机票价格平均较去年便宜了30%左右。火车票的预订数据显示，深圳一广州、上海一杭州、上海一南京、深圳一长沙、深圳一汕头、重庆一成都的预订热度排名最前。
      </view>
      <view class="top3">
        <image src="../../static/secondgoodsdetail.jpg" ></image>
      </view>
    </view>
    <view class="line"></view>
    <view class="content">
      <view class="content1">
        <view><image src="../../static/sgd1.png" ></image>联系人</view>
        <view>李昭</view>
      </view>
      <view class="content2">
        <view><image src="../../static/sgd2.png" ></image>联系电话</view>
        <view>13610926112</view>
      </view>
    </view>
    <view class="line"></view>
    <view class="bottom">
      <view class="bottom1">
        <view>留言</view>
        <view>查看全部></view>
      </view>
      <view class="bottom2">
        <view class="bottom2-top">
          <view class="bottom2-top1">
            <image src="../../static/2.jpg" ></image>
          </view>
          <view class="bottom2-top2">
            <view>雪山飞狐</view>
            <view>2021.12.17</view>
          </view>
        </view>
        <view class="bottom2-bottom">
          整个人生就是思想与劳动，劳动虽然是无闻的、平凡的，却时不能间断的。
          ——冈察洛夫
        </view>
      </view>
      <view class="light"></view>
      <view class="bottom2">
        <view class="bottom2-top">
          <view class="bottom2-top1">
            <image src="../../static/2.jpg" ></image>
          </view>
          <view class="bottom2-top2">
            <view>雪山飞狐</view>
            <view>2021.12.17</view>
          </view>
        </view>
        <view class="bottom2-bottom">
          整个人生就是思想与劳动，劳动虽然是无闻的、平凡的，却时不能间断的。
          ——冈察洛夫
        </view>
      </view>
    </view>
    <view class="line"></view>
    <uv-tabbar
      :value="value"
      :fixed="true"
      @change="(index) => (value = index)"
    >
      <view><uv-tabbar-item text="收藏" icon="star"></uv-tabbar-item></view>

      <view>
        <uv-input
          placeholder="说点什么..."
          border="surround"
          style="background-color: #f5f5f5"
          shape="circle"
        ></uv-input>
      </view>

      <view><uv-button text="留言" shape="circle" color="#FC4424"></uv-button></view>
    </uv-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.box {
  .top {
    width: 90%;
    margin: auto;
    .top1 {
      display: flex;
      .top1-left {
        width: 20%;
        image {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .top1-right {
        line-height: 25px;
        view:nth-child(1) {
          font-weight: bold;
          font-size: 15px;
        }
        view:nth-child(2) {
          font-size: 13px;
          color: #b5b5b5;
        }
      }
    }
    .top2 {
      margin-top: 15px;
      font-size: 14.5px;
      line-height: 22px;
    }
    .top3 {
      margin-top: 15px;
      image {
        width: 100%;
        border-radius: 10px;
      }
    }
  }
  .line {
    margin-top: 15px;
    height: 15px;
    background-color: #f5f5f5;
  }
  .content {
    padding: 10px 15px 10px 15px;
    font-size: 14.5px;
    .content1,
    .content2 {
      display: flex;
      justify-content: space-between;
    }
    image {
      width: 20px;
      margin-right: 10px;
    }
    .content1 {
      padding-bottom: 12px;
      border-bottom: 2px solid #f5f5f5;
    }
    .content2 {
      padding-top: 12px;
    }
  }
  .bottom {
    width: 90%;
    margin: auto;
    .bottom1 {
      display: flex;
      justify-content: space-between;
      view:nth-child(1) {
        font-weight: bold;
        font-size: 18px;
      }
      view:nth-child(2) {
        font-size: 14px;
        color: #fc5b3f;
      }
    }
    .bottom2 {
      margin-top: 20px;
      .bottom2-top {
        display: flex;
        .bottom2-top1 {
          width: 50px;
          image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .bottom2-top2 {
          line-height: 20px;
          view:nth-child(1) {
            font-size: 13.5px;
            font-weight: bold;
          }
          view:nth-child(2) {
            font-size: 13px;
            color: #a0a0a0;
          }
        }
      }
      .bottom2-bottom {
        margin-top: 10px;
        font-size: 13.5px;
      }
    }
  }
  .light {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #f5f5f5;
  }
  .uv-tabbar{
    view{
      margin-top:5px;
    }
    view:nth-child(3){
      width:20%;
      margin-left:10px;
    }
    view:nth-child(2){
      width:55%;
    }
  }
}
</style>
